<template>
	<div class="content">
		<el-form  size="default"  ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
			<el-form-item label="上级部门" prop="parentId">
			  <el-tree-select v-model="form.parentId"
			  :data="data" check-strictly :render-after-expand="false" :default-expanded-keys="[form.parentId]">
			  </el-tree-select>
			</el-form-item>
			<el-row :gutter="20">
				<el-col span="12">
					<el-form-item label="部门名称" prop="deptName">
					  <el-input v-model="form.deptName"  autofocus/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="显示排序" prop="sort">
					  <el-input v-model="form.sort" type="number" min="0"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col span="12">
					<el-form-item label="负责人" prop="contactUser">
					  <el-input v-model="form.contactUser"  autofocus/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="联系电话" prop="contactPhone">
					  <el-input v-model="form.contactPhone" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  :gutter="20">
				<el-col  span="12" >
					<el-form-item label="邮箱" prop="email">
					  <el-input v-model="form.email"/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="状态" prop="status">
					  <el-switch v-model="form.status" active-value="1" inactive-value="0" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="备注" prop="remark">
			  <el-input v-model="form.remark" type="textarea" />
			</el-form-item>
		</el-form>
	</div>
	<div>
    <el-button round  size="default"   plain icon="Edit"  style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
    <el-button round  size="default"  plain icon="Refresh"  style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
    <el-button round  size="default"  plain type="info"  @click="close" >取消</el-button>
  </div>
</template>

<script lang="ts" setup>
	import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
	import IconPicker from '@/components/IconSelect/index.vue'
	import {info,update,save,treelist} from '@/api/dept.ts'
	
	const emit = defineEmits(['closeSaveDeptForm','success'])
	const props = defineProps(['deptId','parentId','t'])
	interface RuleForm {
	  id:any,
	  deptName:string,
	  parentId:any,
	  sort:string,
	  contactUser:string,
	  contactPhone:string,
	  email:string,
	  status:string,
	  remark:string
	}
	const ruleFormRef = ref<FormInstance>()
	const form = reactive<RuleForm>({
	  id:null,	
	  deptName:'',
	  parentId:0,
	  sort:'0',
	  contactUser:'',
	  contactPhone:'',
	  email:'',
	  status:'1',
	  remark:''
	})
	
	const data = ref([{value:0,label:'顶级部门',children:[]}])
	onMounted(()=>{
		treelist().then((res)=>{
			if(res.code === 200){
				data.value[0].children = res.data
			}
		})
	})
	
	watchEffect(()=>{
		const t = props.t
	    console.log("t",t,props.deptId,props.parentId)
		if(props.parentId){
			form.parentId = props.parentId
		}
		if(props.deptId){
			info(props.deptId).then((res)=>{
				if(res.code === 200){
					form.id=res.data.id
					form.deptName=res.data.deptName
					form.parentId=res.data.parentId
					form.sort=res.data.sort
					form.contactPerson=res.data.contactPerson
					form.contactPhone=res.data.contactPhone
					form.email=res.data.email
					form.status=res.data.status
					form.remark=res.data.remark
				}
			})
		}
    treelist().then((res)=>{
      if(res.code === 200){
        data.value[0].children = res.data
      }
    })
	})
	
	const rules = reactive<FormRules<RuleForm>>({
		deptName:[{required:true,message:'部门名称不能为空',trigger:'blur'}],
		sort:[{required:true,message:'排序不能为空',trigger:'blur'}],
	})
	
	
	const onSubmit =  (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  const code2 = ref();
		  if(form.id != null){
			  const {code} = await update(form);
			  code2.value=code
		  }else{
			  const {code} = await save(form);
			  code2.value=code
		  }
		  if(code2.value === 200){
			  ElMessage({
				  type:'success',
				  message:'保存成功'
			  })
        resetForm(ruleFormRef.value)
			  emit('success')
		  }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
		if(!props.deptId){
			  resetForm(ruleFormRef.value)
		}
		emit('closeSaveDeptForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>